@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Kanit:ital,wght@0,400;1,500&family=Kdam+Thmor+Pro&family=Lato:ital@1&family=Lobster&family=Roboto:wght@100;500&family=Ubuntu:wght@500&family=Vina+Sans&display=swap');

:root{
	--primary-color:#3A3A38;
	--secondary-color:white;
	--third-color:#ccc;
}
*{
	border:none;
	outline:none;
	box-sizing:border-box;
}
.dark{

	--primary-color:#838485;
	--secondary-color:white;
	--third-color:#fff;	
}
body{
	background:var(--primary-color);	
}

img{
    width:100%;
    display:flex;	
} 
a{
   text-decoration:none;		
}
nav{
   margin:auto;	
   max-width:1200px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:2rem 3rem;	
   gap:1rem;	
}
#scrol{
	text-align:center;
	align-items:center;
	background:#F327B5;
	width:50px;
	height:50px;
	border-radius:50%;
	bottom:10px;
	right:10px;
	position:fixed;
	cursor:pointer;
	display:none;
	
}
#scrol i{
	color:white;
	font-size:2.2rem;
	
}
 .nav-logo a{
   font-family:lobster;
   max-width:120px;	
   color:var(--secondary-color);
   font-size:1.3rem;

}
 .nav-logo a span{
    font-weight:700;
	color:#F327B5;
}

 .nav-logo a  i{
    font-size:3rem;
	color:#F327B5;
	font-weight:800;
}
#links {
    list-style:none;
    display:flex;
    align-items:center;	
    gap:2rem;
}

#links a{
	font-family:'lato',sans-serif;
	position:relative;
	color:var(--secondary-color);
	font-size:1.2rem;
	padding-bottom:1rem;
}

#links a::after{
	content:"";
	position:absolute;
	height:2px;
	width:0;
	left:0;
    bottom:0;
	background:#F327B5;
    transition:all 0.3s ease;
}

#links a:hover::after{
	width:80%;
}
#moon{
	cursor:pointer;
	width:30px;
	font-size:2rem;
}


.btn{
	font-family:lato;
	text-transform:uppercase;
    padding:1rem 2rem;
	color:#fff;
	background:#F327B5;
   	cursor:pointer;
	font-size:1.3rem;
	border-radius:6px;
	transition:all 0.3s ease;
}

.btn:hover{
	background:#CF0A93;
}

.header-container{
	 padding:1rem 2rem;
	 max-width:1200px;
	 margin:auto;
 }


.blur{
	 position:absolute;
	box-shadow:70px 60px 160px 80px #F327B5;
	 z-index:-100;
 }
 .header-container{
	 position:relative;
	 padding-top:1rem;
	 display:grid;
	 grid-template-columns:repeat(2,3fr);
	 gap:2rem;
 }
 .header-container .content h4{
	font-family:monospace; 
    text-transform:uppercase; 
	color:var(--third-color);
    margin-bottom:1rem;
    font-size:1rem;
    font-weight:600;	 
 }
 
  .header-container .content h1{
	 font-family:roboto;
	 text-transform:uppercase;
	color:var(--secondary-color);
	font-size:3rem;
    margin-bottom:2.4rem;
    font-weight:700;	
    line-height	:4rem;
 }
 
  .header-container .content h1 span{
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:1px var(--secondary-color);
 }
  
 .header-container .content p{
	font-family:roboto; 
	color:var(--third-color);
    margin-bottom:3.6rem;
    line-height:1.4;
 }
 
 .header-container .image::before{
	content:'O';
	position:absolute;
	top:18%;
	left:59%;
	transform:translateX(-2px);
	font-size:40rem;
	font-weight:400;
	line-height:20rem;
	color:#F327B5;
	opacity:0.4;
	z-index:-100;
	
 }

.header-container .image img{
   max-width:430px;
   margin:auto;
	
 }


.title{
	font-family:lato;
	color:var(--secondary-color);
	margin-top:1.8rem;
	margin-bottom:1.5rem;
	text-align:center; 
	font-size:2.25rem;
 }
 
 
 .contentSkills{
	 margin:auto;
	padding-top:2rem;
	 padding-right:1.3rem;
     padding-left:3rem;
	 padding-bottom:1.8rem;
	 display:grid;
	 grid-template-columns:repeat(2,1fr);
	 gap:2rem;
	
} 
.progress{
	position:relative;
	width:400px;
	height:30px;
	background:;
	margin:10px;
	border:3px solid #ccc;
	border-radius:12px;
	
}
.progress span{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	background:#F327B5;
	border-radius:12px;
	transition: 0.3s linear;
}
 .skillsimg{
	 width:510px;
 }
 .html{
	 border:2px solid #F327B5;
	 border-radius:6px;
	 background:white;
	 font-size:1rem;
	 font-weight:600;
	 
 }
 .HT{
	 background-image:linear-gradient(to right,#F33169,#fff,#EC4F7C);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
	 font-family:lobster;
	 margin-bottom:12px;
 }
  .contentGalary{
	  display:flex;
	  overflow-x:scroll;
  }
  .wrap{
	  padding:7px 1rem;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	   margin:auto;
	  
  }
    .contentGalary::-webkit-scrollbar{
	 display:none;
	}

	
		.nextbtn,.backbtn {
	   background:#F327B5;
	   width:50px;
	   height:50px;
	   padding:12px;
	   border-radius:50%;
	   margin:40px;
	   color:var(--secondary-color);
	   font-size:1.5rem;
	   cursor:pointer;
	   display:flex;
	   justify-content:center;
	   align-items:center;
	}
 .contentGalary div{
     padding:1.3rem;
	 display:grid;
	 grid-template-columns:auto auto auto;
	 gap:10px;
	 
	 
	 
 }
 .contentGalary div img{
	width:350px;
	 filter:grayscale(100%);
	transition:0.5s;
 }
 .contentGalary div img:hover{
	 filter:grayscale(0);
	 transform:scale(1.1);
	 cursor:pointer;
 }
 
 .freature{
	 padding-top:2rem;
	 padding-right:1.3rem;
     padding-left:3rem;
	 padding-bottom:1.8rem;
	 display:grid;
	 grid-template-columns:repeat(4,1fr);
	 gap:2rem;
	
}

 .freature .card{
	 padding:1rem;
	 background-color:#27272a;
	 border-top:3px solid #F327B5;
	 border-radius:15px;
	 transition:all 0.3s ease;
	
}


.freature .card:hover{
	 background-color:#323232;
	border-color:var(--secondary-color);
	
}

.freature .card span{
     display:inline-block;
	 background-color:#F327B5;
	 color:white;
	 padding:2px 9px;
	 margin-bottom:1rem;
	 font-size:1.75rem;
	 border-radius:5px;
	
}

.freature .card h4{
	font-family:'lato',sans-serif;
	color:var(--secondary-color);
	font-weight:600;
	margin-bottom:0.5rem;
	font-size:1.2rem;
}
.freature .card p{
	font-family:roboto;
	color:var(--third-color);
	margin-bottom:1rem;
}


.freature .card a{
	color:var(--secondary-color);
	margin-bottom:0.9rem;
}

.freature .card a:hover{
	color:#F327B5;
}

.cv-header{
	font-family:lobster;
	max-width:600px;
	margin:auto 07%;
    text-align:center;
    color:var(--third-color); 
}
.pricing{
	margin-top:4rem;
	display:grid;
	grid-template-columns:repeat(3,3fr);
	gap:2rem;

}

.pricing .card{
	padding:2rem 3rem;
	background:#27272a;
	border:1px solid transparent;
	display:flex;
	flex-direction:column;
	border-radius:15px;
	transition:all 0.3s ease;
}



.pricing .card:hover{
	background:#323232;
    color:var(--secondary-color);
    border:2px solid var(--third-color);
}

.pricing .card .content{
	font-family:roboto;
    flex:1;
    margin-bottom:1rem;
}


.pricing .card .content h4{
   font-size:1.2rem;
   color:var(--secondary-color);
   margin-bottom:1rem;
    font-weight:500;
}



.pricing .card .content h3{
   color:var(--secondary-color);
   font-weight:600rem;
   font-size:2rem;
   border-bottom:2px dashed var(--primary-color);
   margin-bottom:2rem;
   padding-bottom:1rem;
}

.pricing .card .content p{
    color:var(--secondary-color);
    margin-bottom:1rem;
}

.pricing .card .content p i{
   color:var(--secondary-color);
   font-size:1.3rem;
   margin-right:0.5rem;
}

.pricing  button{
   color:var(--secondary-color);
   background:transparent;
   border:2px solid var(--secondary-color);
}

.pricing  button:hover{
   border-color:#F327B5;
}

.nums{
     margin:2rem 8rem;
	 padding-top:2rem;
	 padding-right:1.3rem;
     padding-left:3rem;
	 padding-bottom:1.8rem;
	 display:grid;
	 grid-template-columns:repeat(4,1fr);
	 gap:2rem;
}

.nums .box{
	flex-direction:column;
	padding:1rem 2rem;
	background:#938A8C;
     width:200px;
	
	display:flex;
	border-radius:15px;
	transition:all 0.3s ease;
	
}
.nums .box:hover{
	 background-color:#7E787B;
	border-color:var(--secondary-color);
	
}
.nums .box .number{
font-size:2rem;
font-family:lobster;
text-align:center;
	
}
.nums .box .text{
font-size:1.5rem;
font-weight:600;
text-align:center;
color:#FF0D7B;
font-family:lato;
	
}
.nums .box i{
color:#E8046C;
font-size:2rem;
text-align:center;
	
}
footer{
	position:relative;
	display:grid;
	grid-template-columns:400px repeat(3,1fr);
	gap:2rem;

}
.container{
    max-width:1200px;
    padding:3rem 3rem;	
	margin:auto;	
}
footer .column p{
    font-family:oswald;	
    margin-top:1.1rem;
    color:var(--third-color);
    margin-bottom:1.5rem;
    letter-spacing:1px;
}


footer .column .socials {
    display:flex;
    align-items:center;
    gap:1rem;
}
footer .column .socials a{
    color:var(--third-color);
    border:1px solid var(--secondary-color);
    padding:5px 8px;
    font-size:1.25rem;
    border-radius:50%;
    transition:all 0.3s ease;
}

footer .column .socials a:hover{
    color:var(--secondary-color);
    background:#F327B5;
    border-color:#CF0A93 ;
}

footer .column h4{
    color:var(--third-color);
    font-size:1.3rem;
    font-weight:600;
    margin-bottom:0.75rem;
}

footer .column > a{
   color:var(--third-color);
   display:block;
   margin-bottom:1rem;
   transition:all 0.3s ease;
}
.iconM{
	color:white;
	font-size:2rem;
	cursor:pointer;
	display:none;
}


footer .column > a:hover{
    color:#F327B5;
}
.close{
	display:none;
}


.copyright{
   max-width:1200px;
   margin:auto;
   padding:1rem;
   color:var(--secondary-color);
   font-size:0.8rem;
   text-align:center;  
   font-family:oswald;
}

@media( width < 900px ){
	.iconM{
		display:block;
	}
	.close{
		display:block;
	font-size:2rem;
	margin-left:10px;
	color:#F327B5;
	cursor:pointer;
}
	 #links{
		     position:absolute;
	         box-shadow:12px 0 25px #D4D0D6;
			 border-radius:12px;
			 border:2px solid white;
			 background:linear-gradient(var(--secondary-color),#F327B5);
			 width:16rem;
			 display:block;
			 text-align:center;
			 height:420px;
			 right:0;
			 top:90px;
			 display:none;
			 
			
			 
}
 #links .link a{
	 color:black;
	 font-size:2rem;
 margin:.9rem .1rem;
	padding:.7rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
    .header-container {  
	        grid-template-columns:repeat(1,1fr);
    }
	.header-container  .image {
            grid-area:1/1/2/2;

 }
     .freature{
		    grid-template-columns:repeat(2,1fr);
		 
		 
	 }
	 .pricing{
		    grid-template-columns:repeat(2,1fr); 
	 }
	  .nums{
		    grid-template-columns:repeat(2,1fr); 
	 }
	   .contentSkills{
		    grid-template-columns:repeat(2,1fr); 
	 }
	 
	 footer{
	       grid-template-columns:1fr 200px;
	 }
	 header .image::before{  
	      display:none;
    }
}

	
@media( width < 600px ){

	
	header .image::before{  
	      display:none;
    }
	
 .freature{
		  grid-template-columns:repeat(1,1fr);
		 
		 
	 }
	 	  .nums{
		    grid-template-columns:repeat(1,1fr); 
	 }
	   .contentSkills{
		    grid-template-columns:repeat(1,1fr); 
	 }
 .pricing{
		  grid-template-columns:repeat(1,1fr); 
	 }
		
	footer{
	     grid-template-columns:1fr 150px;
	 }
	
	
}